<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>

	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>课程详情</title>
		<link rel="stylesheet" href="../../resources/layui/css/layui.css" />
		<link rel="stylesheet" href="../../resources/css/coursedetails.css" />
		<link rel="stylesheet" href="../../resources/css/less-compiled.css" />
		<script type="text/javascript" src="../../resources/js/jquery-1.11.1.min.js"></script>
		<!--<script type="text/javascript" src="../../resources/layui/layui.js"></script>-->
		<script type="text/javascript" src="../../resources/js/getUrlString.js"></script>
	</head>

	<body>
		<jsp:include page="/pages/common/header.jsp"></jsp:include>

		<div class="main">
			<div class="h_content layui-anim layui-anim-fadein">
				<div class="course_content">
					<div class="l_course_img">

						<img id="course_img" src="../../resources/images/banner-5.jpg" width="550" height="268" />
						<div class="hid_video_icon">
							<a id="c_href" href=""><img src="../../resources/images/play-icon.png" width="80" height="80" /></a>
						</div>

					</div>
					<div class="r_course_details">
						<div class="r_course_title">
						</div>
						<div class="r_course_other">
							<span>主讲:  </span>
							<span id="teacher_name"> </span>
							<span id="studyNumber">累计报名 </span>
							<span>分享</span>
							<span>收藏</span>
						</div>
						<div class="details">
						</div>
						<div class="price">
						</div>
						<div class="learning layui-btn layui-btn-normal" id="sign_up">
							立即报名
						</div>
					</div>
				</div>
			</div>
			<div class="content_tab  ">

				<div class="tab">
					<!--选项卡-->
					<div class="l_tab layui-anim layui-anim-fadein">

						<div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
							<ul class="layui-tab-title">
								<li class="layui-this">课程简介</li>
								<li>课程目录</li>
								<li>课程评论</li>
							</ul>
							<div class="layui-tab-content  layui-anim layui-anim-upbit">
								<!--课程详情-->
								<div class="layui-tab-item layui-show">

									<div class="ml">
										<h3>适合人群</h3>
									</div>
									<div class="shrq_p">
										<p>
										</p>
									</div>

									<div class="ml">
										<h3>课程描述</h3>

									</div>
									<div class="detals_p">
										<p>
										</p>
									</div>
								</div>
								<!--课程详情-->
								<!--课程目录-->
								<div class="layui-tab-item">
									<div class="ml">
										<h3>目录</h3>
									</div>
									<div class="videos">
										<div class="layui-collapse">
											<div class="layui-colla-item ">
												<h2 class="layui-colla-title  big_type">章节1:helloworld</h2>
												<div class="b_small_bg layui-colla-content layui-show layui-anim layui-anim-scale" style="padding-left: 35px;">
													<span class="layui-icon-video layui-icon"></span>
													<span>课时1</span>
													<span>HelloWorld - JDK</span>
													<a href="../videoplay/video.jsp">
														<span class="play layui-icon-play layui-icon">
															<span style="font-size: 13px;">开始学习</span>
														</span>
													</a>

												</div>
												<div class="b_small_bg layui-colla-content layui-show layui-anim layui-anim-scale" style="padding-left: 35px;">
													<span class="layui-icon-file layui-icon"></span>
													<span>课件</span>
													<span>HelloWorld - JDK</span>
													<a href="">
														<span class="play layui-icon-download-circle layui-icon">
															<span style="font-size: 13px;">立即下载</span>
														</span>
													</a>

												</div>
											</div>
										</div>
									</div>

								</div>
								<!--课程目录-->
								<!--课程评论-->
								<div class="layui-tab-item  layui-anim layui-anim-upbit">
									<div class="ml">
										<h3>讨论区</h3>
									</div>
									<div class="c_text">
										<div class="course_comment">
											<div class="com_top">
												<span class="user_icon">
												<img src="../../resources/images/bg-board-qr.png" width="30" height="30" />
											</span>
												<span class="user_name">
												whyzaa
											</span>
												<span class="commetn_date">
												6月22日
											</span>
											</div>

											<div class="comment_text">
												不错不错
												<span class="comment layui-icon layui-icon-dialogue">
													<span class="nummber"> (0) </span>
												</span>

												<span class="praise layui-icon layui-icon-praise">
													<span class="nummber"> (0) </span>
												</span>
											</div>
											<div class="hidd">
												<div class="hid_comment">
													<textarea name="desc" placeholder="请输入回复的内容" class="layui-textarea"></textarea>
													<button class="btn layui-btn layui-btn-normal">回复</button>
												</div>
											</div>
										</div>

									</div>

									<div class="c_text">
										<div class="course_comment">
											<div class="com_top">
												<span class="user_icon">
												<img src="../../resources/images/bg-board-qr.png" width="30" height="30" />
											</span>
												<span class="user_name">
												whyzaa
											</span>
												<span class="commetn_date">
												6月22日
											</span>
											</div>

											<div class="comment_text">
												不错不错
												<span class="comment layui-icon layui-icon-dialogue">
													<span class="nummber"> (0) </span>
												</span>

												<span class="praise layui-icon layui-icon-praise">
													<span class="nummber"> (0) </span>
												</span>
											</div>
											<div class="hidd">
												<div class="hid_comment">
													<textarea name="desc" placeholder="请输入回复的内容" class="layui-textarea"></textarea>
													<button class="btn layui-btn layui-btn-normal">回复</button>
												</div>
											</div>
										</div>

									</div>

									<div class="c_text">
										<div class="course_comment">
											<div class="com_top">
												<span class="user_icon">
												<img src="../../resources/images/bg-board-qr.png" width="30" height="30" />
											</span>
												<span class="user_name">
												whyzaa
											</span>
												<span class="commetn_date">
												6月22日
											</span>
											</div>

											<div class="comment_text">
												不错不错
												<span class="comment layui-icon layui-icon-dialogue">
													<span class="nummber"> (0) </span>
												</span>

												<span class="praise layui-icon layui-icon-praise">
													<span class="nummber"> (0) </span>
												</span>
											</div>
											<div class="hidd">
												<div class="hid_comment">
													<textarea name="desc" placeholder="请输入回复的内容" class="layui-textarea"></textarea>
													<button class="btn layui-btn layui-btn-normal">回复</button>
												</div>
											</div>
										</div>

									</div>

									<div class="c_text">
										<div class="course_comment">
											<div class="com_top">
												<span class="user_icon">
												<img src="../../resources/images/bg-board-qr.png" width="30" height="30" />
											</span>
												<span class="user_name">
												whyzaa
											</span>
												<span class="commetn_date">
												6月22日
											</span>
											</div>

											<div class="comment_text">
												不错不错
												<span class="comment layui-icon layui-icon-dialogue">
													<span class="nummber"> (0) </span>
												</span>

												<span class="praise layui-icon layui-icon-praise">
													<span class="nummber"> (0) </span>
												</span>
											</div>
											<div class="hidd">
												<div class="hid_comment">
													<textarea name="desc" placeholder="请输入回复的内容" class="layui-textarea"></textarea>
													<button class="btn layui-btn layui-btn-normal">回复</button>
												</div>
											</div>
										</div>

									</div>

									<div class="c_text">
										<div class="course_comment">
											<div class="com_top">
												<span class="user_icon">
												<img src="../../resources/images/bg-board-qr.png" width="30" height="30" />
											</span>
												<span class="user_name">
												whyzaa
											</span>
												<span class="commetn_date">
												6月22日
											</span>
											</div>

											<div class="comment_text">
												不错不错
												<span class="comment layui-icon layui-icon-dialogue">
													<span class="nummber"> (0) </span>
												</span>

												<span class="praise layui-icon layui-icon-praise">
													<span class="nummber"> (0) </span>
												</span>
											</div>
											<div class="hidd">
												<div class="hid_comment">
													<textarea name="desc" placeholder="请输入回复的内容" class="layui-textarea"></textarea>
													<button class="btn layui-btn layui-btn-normal">回复</button>
												</div>
											</div>
										</div>

									</div>

									<div class="c_text">
										<div class="course_comment">
											<div class="com_top">
												<span class="user_icon">
												<img src="../../resources/images/bg-board-qr.png" width="30" height="30" />
											</span>
												<span class="user_name">
												whyzaa
											</span>
												<span class="commetn_date">
												6月22日
											</span>
											</div>

											<div class="comment_text">
												还可以还可以还可以还可以还可以还可以还可以还可以还可以还可以还可以还可以还可以还可以还可以还可以还可以还可以
												<span class="comment layui-icon layui-icon-dialogue">
													<span class="nummber"> (0) </span>
												</span>

												<span class="praise layui-icon layui-icon-praise">
													<span class="nummber"> (0) </span>
												</span>
											</div>
											<div class="hidd">
												<div class="hid_comment">
													<textarea name="desc" placeholder="请输入回复的内容" class="layui-textarea"></textarea>
													<button class="btn layui-btn layui-btn-normal">回复</button>
												</div>
											</div>
										</div>

									</div>

								</div>
								<!--课程评论-->

							</div>
						</div>

					</div>

					<!--选项卡-->
					<div class="r_small_box layui-anim layui-anim-up">
						<!--最近学习-->
						<div class="people">
							<div class="p_top">
								最近在学
							</div>
							<div class="p_box">
								<div class="peo">
									<img src="../../resources/images/banner-2.jpg" width="40" height="40" />
									<div class="p_name">
										whyzaa
									</div>
								</div>
								<div class="peo">
									<img src="../../resources/images/banner-2.jpg" width="40" height="40" />
									<div class="p_name">
										whyzaa
									</div>
								</div>
								<div class="peo">
									<img src="../../resources/images/banner-2.jpg" width="40" height="40" />
									<div class="p_name">
										whyzaa
									</div>
								</div>
								<div class="peo">
									<img src="../../resources/images/banner-2.jpg" width="40" height="40" />
									<div class="p_name">
										whyzaa
									</div>
								</div>
								<div class="peo">
									<img src="../../resources/images/banner-2.jpg" width="40" height="40" />
									<div class="p_name">
										whyzaa
									</div>
								</div>
								<div class="peo">
									<img src="../../resources/images/banner-2.jpg" width="40" height="40" />
									<div class="p_name">
										whyzaa
									</div>
								</div>
								<div class="peo">
									<img src="../../resources/images/banner-2.jpg" width="40" height="40" />
									<div class="p_name">
										whyzaa
									</div>
								</div>
								<div class="peo">
									<img src="../../resources/images/banner-2.jpg" width="40" height="40" />
									<div class="p_name">
										whyzaa
									</div>
								</div>
								<div class="peo">
									<img src="../../resources/images/banner-2.jpg" width="40" height="40" />
									<div class="p_name">
										whyzaa
									</div>
								</div>
								<div style="clear: both;"></div>

							</div>
						</div>
						<!--最近学习-->
						<!--推荐课程-->
						<div class="recommended">
							<div class="p_top">
								推荐课程
							</div>
							<div class="recommended_course_box">
								<img src="../../resources/images/course/course10.png" class="pic_image" />
								<div class="recommended_course_box-caption bottom-to-top">
									<a href="coursedetails.jsp"><img src="../../resources/images/play-icon.png" width="80" height="80" /></a>

								</div>
							</div>
							<div class="recommended_course_box">
								<img src="../../resources/images/course/course10.png" class="pic_image" />
								<div class="recommended_course_box-caption bottom-to-top">
									<a href="coursedetails.jsp" class="layui-btn layui-btn-normal">前往学习</a>
								</div>
							</div>
							<div class="recommended_course_box">
								<img src="../../resources/images/course/course10.png" class="pic_image" />
								<div class="recommended_course_box-caption bottom-to-top">
									<a href="coursedetails.jsp" class="layui-btn layui-btn-normal">前往学习</a>
								</div>
							</div>

						</div>

						<!--推荐课程-->

					</div>
					<div style="clear: both;"></div>

				</div>
				<div style="clear: both;"></div>

			</div>
			<div style="clear: both;"></div>
		</div>
		<!--footer-->
		<jsp:include page="/pages/common/footer.jsp"></jsp:include>
		<!--footer-->
		<!--加载element模块-->
		<script>
			layui.use('element', function() {
				var element = layui.element;
			});
		</script>

		<script>
			$(function() {
				$(".c_text").click(function(event) {
					//取消冒泡事件
					event.stopPropagation(); //这句是必须
					//若css已经给divTop定位则不需要再定位
					var offset = $(event.target).offset();
					$(".hidd").css({
						top: offset.top + $(event.target).height + "px",
						left: offset.left
					});
					$(this).children().find(".hidd").slideToggle();
				});
				//点击空白或者其他区域时divTop隐藏
				$(".main").click(function() {
					$(".hidd").slideUp('slow');
				});
				$(".hidd").click(function(event) {
					//阻止冒泡
					event.stopPropagation();
				});
			});
		</script>
		<script>
			var userId = '${sessionScope.userId}';
			var courseIntergal = "免费";
			var Intergal = "";
			$(document).ready(function() {
				$.ajax({
					type: "post",
					url: "/course/queryCourseDeatilsById.action",
					dataType: "json",
					data: {
						"course.courseId": GetUrlString("courseId")
					},
					success: function(data) {
						var course = data.course;
						if(course.courseIntergal != 0) {
							courseIntergal = course.courseIntergal + "积分";
						}
						Intergal = course.courseIntergal;
						$("#c_href").attr("href", "/pages/course/coursedetails.jsp?courseId=" + course.courseId);
						$("#course_img").attr("src", course.coursePicture);
						$(".r_course_title").html(course.courseName);
						$("#teacher_name").html(course.user_Name);
						$("#studyNumber").html("学习人数：" + course.studyNumber);
						$(".details").html(course.courseDescribe);
						$(".price").html(courseIntergal);
						$(".shrq_p p").html(course.adopt);
						$(".detals_p p").html(course.courseDescribe);
					}
				});
				if(userId != '') {
					$.ajax({
						type: "post",
						url: "/course/isCanSignUp.action",
						dataType: "json",
						data: {
							"course.courseId": GetUrlString("courseId")
						},
						success: function(data) {
							if(data.result == true) {
								$("#sign_up").html("已报名");
								$("#sign_up").removeClass("layui-btn-normal");
								$("#sign_up").addClass("layui-btn-danger");
							}
						},
						error: function() {
							layer.msg('未登录或未报名！！', {
								icon: 2,
								time: 1000
							});
						}
					});
				}
				$.ajax({
					type: "post",
					url: "/courseChapter/queryCourseChapter.action",
					data: {
						"course.courseId": GetUrlString("courseId")
					},
					dataType: "json",
					success: function(result) {
						var i = 0;
						$.each(result.courseChaptersList, function(courseChaptersIndex, courseChaptersItem) {
							$.each(result.classHoursList, function(classHoursIndex, classHoursItem) {
								if(courseChaptersItem.courseChapterId == classHoursItem.courseChapterId) {
									console.log(classHoursItem.classHourId);
									var li = "<div class='layui-collapse'><div class='layui-colla-item '><h2 class='layui-colla-title  big_type'>" + courseChaptersItem.chapterName + ":" + classHoursItem.classHourName + "</h2>";
									li += "<div class='b_small_bg layui-colla-content layui-show layui-anim layui-anim-scale' style='padding-left: 35px;'>";
									li += "<span class='layui-icon-video layui-icon'></span>";
									li += "<span>" + classHoursItem.classHourName + "</span>";
									li += "<a href='#'>";
									li += "<span class='play layui-icon-play layui-icon'><span style='font-size: 13px;' class='actionlearning' >开始学习<input type='hidden' value='" + classHoursItem.classHourId + "'></span></span></a></div></div></div></div>";
									$(".videos").append(li);
									i++;
								}
							});
						});
						$(".actionlearning").on('click', function() {
							var value = $(this).children("input").val();
							if(userId != '') {
								$.ajax({
									type: "post",
									url: "/course/isCanSignUp.action",
									dataType: "json",
									data: {
										"course.courseId": GetUrlString("courseId")
									},
									success: function(data) {
										if(data.result == false) {
											layer.msg('未报名！！', {
												icon: 2,
												time: 1000
											});
											return false;
										} else {
											window.location.href = ("/pages/videoplay/video.jsp?classhourId="+value+"&courseId="+GetUrlString("courseId")+"");
										}
									}
								});
							} else {
								layer.msg('未登录或未报名！！', {
									icon: 2,
									time: 1000
								});
							}

						});
					}

				});
			});
		</script>
		<script>
			layui.use('element', function() {
				var element = layui.element;
				element.init(); //更新全部  2.1.6 可用 element.render() 方法替代

			});
		</script>
		<script>
			//			?course.courseId=50&&course.courseIntergal=20&sign_up.courseId=50&sign_up.userId=63
			$("#sign_up").on('click', function() {
				if(userId != '') {
					$.ajax({
						type: "post",
						url: "/course/signCourse.action",
						data: {
							"course.courseId": GetUrlString("courseId"),
							"course.courseIntergal": Intergal,
							"sign_up.courseId": GetUrlString("courseId"),
							"sign_up.userId": userId
						},
						dataType: "json",
						success: function(data) {
							if(data.result == true) {
								$.ajax({
									type: "post",
									url: "/course/reduceUserInteral.action",
									data: {
										"course.courseIntergal": Intergal
									},
									dataType: "json",
									success: function(data) {
										if(data.result == true) {
											layer.msg('报名成功！！', {
												icon: 1,
												time: 1000,
												end: function() {
													window.location.reload();
												}
											});
										}
									}
								});
							} else {
								layer.msg('' + data.result, {
									icon: 2,
									time: 1000,
								});
							}
						}
					});
				} else {
					layer.msg('未登录!!', {
						icon: 2,
						time: 1000
					});
				}
			});
		</script>
		<script>
		</script>
	</body>

</html>